<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人存款计算器</title>
		<link rel="shortcut icon" type="imgage/x-icon" href="img/logo.png"/>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script>
			function calc(){
				num1 = $("#num1").val();
				regExp = /^[0-9]{1,8}$/;
				if(!regExp.test(num1)){
					$("#num1").val("必须是1-8位数字！").css("color","red");
					return;//遇到这里程序停止,不再执行下面的语句
				}
				number1 = parseInt(num1);
				year1=$("#year option:selected").text();
				if(year1=="三年"){
				  	num2=$("#year").val() * number1 * 3; 
				}
				if(year1=="五年"){
				  	num2=$("#year").val() * number1 * 5; 
				}
				if(year1=="二年"){
				  	num2=$("#year").val() * number1 * 2; 
				}
				if(year1=="一年"){
				  	num2=$("#year").val() * number1 * 1; 
				}
			
				year = $("#year").val();
				num2 = number1 * year;
				
				$("#num2").val(num2);
				total = number1 +num2;
				$("#num3").val(total);
				
				alert($("#year option:selected").text());
			}
			function clearNum1(){
				$("#num1").val("").css("color","");
			}
		</script>
	</head>
	<body>
		<div style="width: 50%;" class="text-center center-block">
		  <div>
			  <img src="img/cmb.png" >
		  </div>
			  <table class="table table-bordered">
			  	 <tr class="bg-primary">
					<td colspan="2">个人存款计算</td><!-- 单元格 -->
				 </tr>
				 <tr>
					 <td class="text-right">存款金额</td>
					 <td>
						 <input onfocus="clearNum1()" class="form-control" type="text" id="num1"  />
					 </td>
				 </tr>
				 <tr>
				 	 <td class="text-right">存款期限</td>
				 	 <td> 
				 		 <select class="form-control" id="year" >
				 		 	<option value="0.0175">一年</option>
							<option value="0.0225">二年</option>
							<option value="0.0275">三年</option>
							<!-- <option value="0.0275">四年</option> -->
							<option value="0.0175">五年</option>
				 		 </select>
				 	 </td>
				 </tr>
				 <tr>
					 <td class="text-right">所得利息</td>
					 <td>
						 <input disabled="disabled" readonly="readonly" id="num2" class="form-control" type="text" />
					 </td>
				 </tr>
				 <tr>
				 	 <td class="text-right">本息合期</td>
				 	 <td>
				 		 <input disabled="disabled" readonly="readonly"  id="num3" class="form-control" type="text" />
				 	 </td>
				 </tr>
				 <tr>
					 <td colspan="2">
						 <button onclick="calc()" class="btn btn-block btn-primary" type="button">开始计算</button>
					 </td>
				 </tr>
			 </table>
			 <div>
			 	开发者：182055103 武紫缘
			 </div>
		</div>
	</body>
</html>
